<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- 引用初始化JS -->
<%-- <script type="text/javascript" src="${root}/resources/js/jquery-1.9.1.js"></script> --%>
<link rel="stylesheet" href="${root}/resources/plugins/multiFile-upload/control/css/zyUpload.css" type="text/css">
<script type="text/javascript" src="${root}/resources/js/ajaxfileupload.js"></script>

<div class="row">
<div class="portlet">
<div id="studentInfo" class="portlet-title">
     <div class="caption"><i class="icon-reorder"></i>商品编辑</div>
  </div>
  <div class="portlet-body">
     <!-- BEGIN FORM-->
     <form  id="productForm" class="form-horizontal">
     
        <input type="hidden" id="id" name="id"  />
     	<input type="hidden" id="carousel_images" name="carousel_images"  />
     	<input type="hidden" id="detail_images" name="detail_images"  />
     	<input type="hidden" id="status" name="status"  />
     	<input type="hidden" id=asDefault name="asDefault"  />
     	<input type="hidden" id=goodsPic name="goodsPic"  />
     	
     	
     	
        <input id="fileList"  name="fileList" type="file" data-index="" 
                              onchange="inputchange()" class="hide" accept="image/*" >
     	
        <div class="form-body">
           <div class="alert alert-danger display-hide">
<!--               <button class="close" data-dismiss="alert"></button> -->
              			   验证未成功,请检查 
           </div>
           <div class="alert alert-success display-hide">
<!--               <button class="close" data-dismiss="alert"></button> -->
              	                       验证成功
           </div>
           
             <div class="form-group ">
                        <label class="col-md-1 control-label" for="inputError">商品名称</label>
                        <div class="col-md-4">
                           <div class="input-icon right">
                              <i class="fa-check"></i>
                               <input id="goodsName" name="goodsName" type="text" class="form-control required " maxlength="20" >
                           </div>
                        </div>
              </div>
           
           
           <div class="form-group">
              <label class="control-label col-md-1">商品编号 </label>
              <div class="col-md-4">
                           <div class="input-icon right">
                              <i class="fa-check"></i>
                               <input id="goodsCode"  name="goodsCode" type="text" class="form-control required " maxlength="20" >
                           </div>
              </div>
           </div>
           
           
           <div class="form-group">
              <label class="control-label col-md-1">商品描述 </label>
               <div class="col-md-4">
                           <div class="input-icon right">
                              <i class="fa-check"></i>
                              <input id="goodsDesc" name="goodsDesc" type="text" class="form-control "  maxlength="20"  >
                           </div>
               </div>
           </div>
           
           
           <div class="form-group">
              <label class="control-label col-md-1">原价(分)</label>
              <div class="col-md-4">
                           <div class="input-icon right">
                              <i class="fa-check"></i>
                              <input id="sellPrice"  name="sellPrice" type="text" class="form-control required number"  >
                           </div>
                       </div>
           </div>
           <div class="form-group">
              <label class="control-label col-md-1">现价(分)</label>
              <div class="col-md-4">
                           <div class="input-icon right">
                              <i class="fa-check"></i>
                              <input id="currentPrice"  name="currentPrice" type="text" class="form-control required number" >
                           </div>
                       </div>
           </div>
           <div class="form-group">
              <label class="control-label col-md-1">优惠描述</label>
              <div class="col-md-4">
                           <div class="input-icon right">
                              <i class="fa-check"></i>
                              <input id="discountDesc"  name="discountDesc" type="text" class="form-control required" >
                           </div>
                       </div>
           </div>
           
               <div id="imageGroup1" class="form-group" >
                   <label class="control-label col-md-1">滑动图</label>
                   
                   <div id="upload_append_list" class="upload_append_list hide" data-name="">	
	                   <div class="file_bar">	
	                		<div style="padding:5px;">	
		         				<p class="file_name"></p>
		         				<span class="file_del" data-index=""   title="删除"></span>
	         				</div>	
	         		    </div>	
         				  <a style="height:115px;width:140px;"  class="imgBox">
    				 		 <div class="uploadImg" style="width:125px;max-width:125px;max-height:105px;">	
     						        <img  class="upload_image" src="$imagesrc"  style="width: 125px;height: 100px;">
     					     </div>
     					 </a>	
     			    </div>
              </div>
           
             <div class="form-group">
                <label class="control-label col-md-1">预览</label>
                <div class="col-md-4">
<!--                    <label id="selectedFile1"></label> -->
                  <img id="preview1" alt="" name="pic" width="50" height="50"/>
                </div>
                 <div class="col-md-4">
                     <button type="button" class="btn btn-primary"  onclick="openSelectFile(1);" >添&nbsp; 加<i class="icon-plus"></i></button> 
 					 <button type="button" class="btn btn-primary"  onclick="uploadImage(1);">上&nbsp;传 <i class="icon-arrow-up"></i></button>        
 	           </div>
           </div>
           
           
           
              <div id="imageGroup2" class="form-group" >
                   <label class="control-label col-md-1">图文详情</label>
                   <div class="col-md-11"> 
                   	     <div class="upload_append_list hide"></div>	
                   </div>
              </div>
           
             <div class="form-group">
                <label class="control-label col-md-1">预览</label>
                <div class="col-md-4">
<!--                    <label id="selectedFile2"></label> -->
				<img id="preview2" alt="" name="pic" width="50" height="50"/>
                </div>
                 <div class="col-md-4">
                                      <button type="button" class="btn btn-primary"  onclick="openSelectFile(2);">添&nbsp; 加<i class="icon-plus"></i></button> 
 					 <button type="button" class="btn btn-primary"  onclick="uploadImage(2);">上&nbsp;传 <i class="icon-save"></i></button>        
 	           </div>
           </div>
           
           
           
           <div id="imageGroup3" class="form-group" >
                   <label class="control-label col-md-1">产品封面</label>
                   <div class="upload_append_list hide"></div>	
              </div>
           
             <div class="form-group">
                <label class="control-label col-md-1">预览</label>
                <div class="col-md-4">
<!--                    <label id="selectedFile2"></label> -->
				<img id="preview3" alt="" name="pic" width="50" height="50"/>
                </div>
                 <div class="col-md-4">
                                      <button type="button" class="btn btn-primary"  onclick="openSelectFile(3);">添&nbsp; 加<i class="icon-plus"></i></button> 
 					 <button type="button" class="btn btn-primary"  onclick="uploadImage(3);">上&nbsp;传 <i class="icon-save"></i></button>        
 	           </div>
           </div>
           
           
           
        </div>
        
         <div class="row">
           <div class="col-md-offset-10 col-md-2">
                <button type="submit" class="btn btn-primary" >保&nbsp;存 <i class="icon-save"></i></button>
                <button type="button" class="btn btn-primary" onclick="goBack();">返&nbsp;回 <i class="icon-save"></i></button>
           </div>
        </div>
        
     </form>
     
     <!-- END FORM-->
     </div>
  </div>
 </div>
 
 <script>
 	 function goBack(){
 		App.ajaxContent(root + "/goods/toGoodsPage") ;	
 	 }
 	 
 	 
 
 	 
	 $(document).ready(function(){
		   var pageData  =  App.getPageParams();
		   if(pageData.pageStatus = 'update' ){
			   initPage();
		   }
		   if(pageData.role_ids){
				var ids = pageData.role_ids.split(",") ;
				$.each(ids ,function(index,element){
					$("#r" + element).attr("checked", "checked");
		        });
			}
		 
		   $('#productForm').formValidation({
				successCallback : function(data) {
					setProduct(data) ;
				}
			});
		   
		    function setProduct(data){
		    	data.carousel_images =  getImageStr(1);
		    	data.detail_images =  getImageStr(2);
		    	data.goodsPic = getImageStr(3) ; 
			    doAjax(root+ '/goods/saveGoodsInfo', data);
		    }
		    
		    function initPage(){
		    	var pageData  =  App.getPageParams();
		    	var id = pageData.id ;
		    	doAjax(root+ '/goods/getGoodsById', {id:id},function(res){
		    		var entity = res.data ;
		    		$("#id").val(entity.id) ;
		    		$("#goodsName").val(entity.goodsName) ;
		    		$("#goodsCode").val(entity.goodsCode) ;
		    		$("#goodsDesc").val(entity.goodsDesc) ;
		    		$("#sellPrice").val(entity.sellPrice) ;
		    		$("#currentPrice").val(entity.currentPrice) ;
		    		$("#discountDesc").val(entity.discountDesc) ;
		    		$("#carousel_images").val(entity.carousel_images) ;
		    		$("#detail_images").val(entity.detail_images) ;
		    		$("#status").val(entity.status) ;
		    		$("#asDefault").val(entity.asDefault) ; 
		    		$("#goodsPic").val(entity.goodsPic) ; 
		    		
		    		if(entity.carousel_images){
		    			 initImageBox(1,entity.carousel_images);
		    		}
		    		if(entity.detail_images){
		    			 initImageBox(2,entity.detail_images);
		    		}
		    		
		    		if(entity.goodsPic){
		    			initImageBox(3,entity.goodsPic);
		    		}
		    		
		    	});
		    }
		    
		    
			/**初始化预览 **/
		    function initImageBox(type , str){
		    	if(str == null || str == "") return ;
		    	var jqueryid = "#imageGroup" +type;
		    	
		     	var images = str.split(",");
		     	$.each(images,function(index,element){
		     		var picBox = $("#upload_append_list").clone();
			     	picBox.removeClass("hide");
		     		picBox.attr("id", element.split(".")[0]);
		         	picBox.attr("data-name",  element);
		         	picBox.find(".file_name").html(element) ;
		         	picBox.find(".file_del").attr("data-index",element);
		         	picBox.find(".upload_image").attr("src",'${sysparam.IMAGE_PREFIX_URL}/upload/'+element) ;
		         	$(jqueryid).append(picBox) ;
		     	}) ;
		     	funBindHoverEvent();
		    }
		    
		   
	 });
	 
	 
	
	 
     //绑定显示操作栏事件
	 var funBindHoverEvent = function(){
		$(".upload_append_list").hover(
			function (e) {
				$(this).find(".file_bar").addClass("file_hover");
			},function (e) {
				$(this).find(".file_bar").removeClass("file_hover");
			}
		);
	 };
	
	function openSelectFile(type){ 
		$("#fileList").click();
		$("#fileList").attr("data-index",type);
	}
	
	 function html5Reader(file,type){
	    // var file = file.files[0];
	     var reader = new FileReader();
	     reader.readAsDataURL(file.files[0]);
	     reader.onload = function(e){
	         var pic = document.getElementById("preview"+type);
	         pic.src=this.result;
	     }
	 }
	 
	 function getImageStr(type){
		 var str = "" ;
		 $("#imageGroup"+type+" .upload_append_list").each(function(i){
			 if(i!=0){
				 str = str + $(this).attr("data-name") + ","; 
			 }
		 });
		 str  =  str.substring(0,str.length -1) ;
		 return str ;
	 }
	
	function inputchange(){
		var type = $("#fileList").attr("data-index") ;
// 		$("#selectedFile"+type).html($("#fileList").val());

		 var pic = document.getElementById("preview"+ type),
	     file = document.getElementById("fileList");
	     var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
	     // gif在IE浏览器暂时无法显示
	     if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){
	         alert("图片的格式必须为png或者jpg或者jpeg格式！"); 
	         return;
	     }
	     var isIE = navigator.userAgent.match(/MSIE/)!= null,
	         isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null;
	     if(isIE) {
	        file.select();
	        var reallocalpath = document.selection.createRange().text;
	        // IE6浏览器设置img的src为本地路径可以直接显示图片
	         if (isIE6) {
	            pic.src = reallocalpath;
	         }else {
	            // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
	             pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
	             // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
	             pic.src = '';
	         }
	     }else {
	        html5Reader(file,type);
	     }
	}
	
	function uploadImage(type){
// 		    var formData = new FormData(); //构造空对象  
//             formData.append("fileList", $("#fileList")[0].files[0]);  
//             $.ajax({  
//                 url : root+'/file/uploadImage',  
//                 type : 'POST',  
//                 data : formData,  
//                 //必须false才会避开jQuery对 formdata 的默认处理   XMLHttpRequest会对 formdata 进行正确的处理   
//                 processData : false,  
//                 //必须false才会自动加上正确的Content-Type   
//                 contentType : false,  
//                 success : function(res) {  
//                 	console.log(res.code) ;
//                 },  
//                 error : function(res) { 
                	
//                 }  
//             }); 
		 var length = $("#imageGroup"+type+" .upload_append_list").length;
		 if(length ==11){
			 alert("最多上传10张图片"); 
			 return ;
		 }
		 if( type == 3 && length == 2){
			 alert("只能上传一张封面图"); 
			 return ;
		 }
		 
         var jqueryid = "#imageGroup" +type;
		 $.ajaxFileUpload({
	            url: root+'/file/uploadImage', 
	            type: 'post',
	            secureuri: false,             //一般设置为false
	            fileElementId: 'fileList',    // 上传文件的id、name属性名
	            dataType: 'json',             //返回值类型，一般设置为json、application/json
	            success: function(res, status){
	            	if(res.code == "0000"){
	            		var picBox = $("#upload_append_list").clone();
		            	picBox.removeClass("hide");
		            	var id = res.data.split(".")[0] ;
		            	picBox.attr("id", id);
		            	picBox.attr("data-name", res.data);
		            	picBox.find(".file_name").html(res.data) ;
		            	picBox.find(".file_del").attr("data-index",res.data);
		            	picBox.find(".upload_image").attr("src",'${sysparam.IMAGE_PREFIX_URL}/upload/'+res.data) ;
		            	$(jqueryid).append(picBox) ;
		            	funBindHoverEvent();
		            	
		            	$("#preview1").attr("src","");
		            	$("#preview2").attr("src","");
		            	$("#preview3").attr("src","");
	            	}else{
						alert(res.msg) ;	            		
	            	}
	            },
	            
	            error: function(data, status, e){ 
	               //
	            }
	        });
	}
 </script>
